<template>
  <div id="cart">
    <div  class="containner px-20 py-20 text-xl weight gray rounded box-shadow"
    	v-if="cart.cart_list.length == 0">
    	购物车中暂无任何记录！
    </div>
    <!---->
    <div class="containner" v-if="cart.cart_list.length > 0">
      <div class="flex justify-between item-center text-md dark bg-gray px-20 py-5 cart-header">
        <div class="mx-5"><input type="checkbox" class="cart_cbx" :checked="cart.all_checked"></div>
        <div class="cart-product mx-5">商品</div>
        <div class="cart-param mx-5">单价</div>
        <div class="cart-param mx-5">数量</div>
        <div class="cart-param mx-5">小计</div>
        <div class="cart-param mx-5">操作</div>
      </div>
      <!-- 遍历购物车列表 -->
      <div class="flex justify-between item-center text-md dark my-10 px-20 py-5 cart-body"
        v-for="(cart,index) in cart.cart_list" :key="cart.cart_id">
        <div class="mx-5"><input type="checkbox" class="cart_cbx" :checked="cart.cart_checked == 1"
            @change="checked_changed($event, cart, index)"></div>
        <div class="cart-product mx-5 flex item-start"><img :src="website.base_img_url + cart.cart_thumburl"
            width="80px" height="80px" class="rounded hand">
          <div class="cart-name mx-10 text-left flex-column justify-between item-start">
            <div class="hover-red hand ">{{cart.cart_name}}</div>
            <div class="cart-sku flex item-center">
              <!-- 遍历sku属性 -->
              <div class="gray text-sm pr-5 hand hover-red" v-for="sku in JSON.parse(cart.cart_sku)"
                :key="sku.value_id">
                {{sku.value_name}}
              </div>
            </div>
          </div>
        </div>
        <div class="cart-param mx-5">￥{{cart.cart_price.toFixed(2)}}</div>
        <div class="cart-param mx-5"><input type="number" min="1" class="cart-count" :value="cart.cart_count"></div>
        <div class="cart-param mx-5">￥{{(cart.cart_count * cart.cart_price).toFixed(2)}}</div>
        <div class="cart-param mx-5 hover-red hand" @click="delete_clicked(cart, index)">删除</div>
      </div>
      <div class="flex justify-between item-center mt-10">
        <div class="flex item-center">
          <div class="mx-5"><input type="checkbox" class="cart_cbx" :checked="cart.all_checked"></div>
          <div class="mx-5 gray hover-red hand text-sm">清空购物车</div>
        </div>
        <div class="flex item-center justify-end">
          <div class="mx-5 dark text-md"><span>总价：</span><span
              class="red text-xl weight">￥{{cart.total.toFixed(2)}}</span>
          </div><button class="btn-pay ml-10 hand" @click="pay_clicked">去结算</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapActions,
    mapState
  } from 'vuex'
  export default {
    computed: {
      ...mapState(['cart', 'website'])
    },
    methods: {
      ...mapActions('cart', ['get_cart_list', 'update_cart', 'delete_cart']),
      //修改勾选
      checked_changed(e, cart, index) {
        this.update_cart({
          car_id: cart.car_id,
          cart_checked: e.target.checked ? 1 : 0,
          cart_count: cart.cart_count,
          index: index
        })
      },
      //删除
      delete_clicked(cart, index) {
        this.delete_cart({
          car_id: cart.car_id,
          index: index
        });
      },
      //结算
      pay_clicked() {
        this.$router.push({
          path: '/account'
        })
      }
    },
    mounted() {
      this.get_cart_list()
    }
  }
</script>

<style scoped="scoped">
  .cart-header {
    border: 1px solid #ddd;
  }

  .cart-product {
    width: 600px;
  }

  .cart-param {
    width: 120px;
  }

  .cart-count {
    width: 120px;
    text-align: right;
  }

  .cart-name {
    width: 500px;
    height: 80px;
  }

  .btn-pay {
    outline: none;
    padding: 9px 20px;
    background-color: #c33;
    color: #fff;
    border: 1px solid #c33;
    border-radius: 6px;
  }

  .btn-pay:hover {
    background-color: #d33;
  }
</style>
